<template>
    <div>
        <el-upload
                :action="action"
                :multiple="limit>1"
                :limit="limit"
                :http-request="uploadImg"
                :on-success="uploadImgSuccess"
                :before-upload="beforeUploadHandler"
                :on-remove="uploadImgRemove"
                :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" style="font-size: 12px;color: #909399;" class="el-upload__tip">只能上传mp4文件，且不超过2MB</div>
        </el-upload>
    </div>
</template>

<script>
    import * as upload from '@/utils/upload'

    export default {
        name: "index",
        props: {
            limit: {
                type: Number,
                default() {
                    return 1
                }
            }
        },
        data() {
            return {
                fileList: [],
                videoList: [],
                count: 0,
                action: '',
            }
        },
        methods: {
            uploadImg(option) {
                upload.uploadFileAndGetPath(option)
            },
            beforeUploadHandler(file) {
                let fileName = file.name.split('.')
                let suffix = fileName[fileName.length - 1]
                const imgList = ['mp4']
                let isImg = imgList.some(function (item) {
                    return item === suffix
                })
                const isLt2M = file.size / 1024 / 1024 < 2

                if (!isImg) {
                    this.$message.error('上传图片只能是 mp4 格式!')
                }
                if (!isLt2M) {
                    this.$message.error('上传图片大小不能超过 2MB!')
                }
                return isImg && isLt2M
            },
            //  返回给父组件值
            returnImgValue() {
                let values = []
                this.videoList.forEach(o => {
                    values.push(o.path)
                })
                this.$emit("on-change", values)
            },
            uploadImgSuccess(value) {
                this.count++
                this.videoList.push(value)
                this.returnImgValue()
            },
            uploadImgRemove(value) {
                this.count--
                let removeIndex = this.videoList.findIndex(item => {
                    if (item === value.response) {
                        return true;
                    }
                })
                this.videoList.splice(removeIndex, 1)
                this.returnImgValue()
            },
            //  初始显示
            initFile(values) {
                if (!values || values.length <= 0) {
                    return
                }
                let mFileList = []
                values.forEach((o => {
                    mFileList.push({
                        url: o,
                        name: o.split('/')[o.split('/').length-1]
                    })
                }))
                this.fileList = mFileList
            }

        }
    }
</script>

<style scoped>

</style>
